<style>
  .page {
    display: flex;
    /*设为伸缩容器*/
    flex-flow: row;
    /*伸缩项目单行排列*/
  }

  .sidebar {
    width: 300px;
  }

  #answers {
    flex: 1;
    margin-right: 20px;
  }

  .answer {
    margin-bottom: 20px;
    background-color: beige;
    border-bottom: 2px solid black;
  }

  img {
    width: 400px !important;
  }
</style>
<script src="getjson.js"></script>
<div class="page">
  <div id="answers">
    答案列表显示在这
  </div>
  <div class="sidebar">
    <h2>相关问题</h2>
    <div>
      <ul>相关问题的列表显示在这</ul>
    </div>
  </div>
</div>

<script>
  // 知乎回答的文件有4个an1-4.json
  // 相关问题 similar.json




  const promises = [
    getJSON('./similar.json'),
    ...[...Array(4)]
      .map((_, index) => index + 1)
      .map(n => getJSON(`./an${n}.json`))
  ]
  Promise.all(promises)
    .then(([questions, ...datas]) => {
      const ul = document.querySelector('.sidebar ul')
      const answers = document.querySelector('#answers')

      // ul.innerHTML = questions.map().join('')
      answers.innerHTML = datas.reduce(() => { }, [])
        .map(() => { }).join('')
    })
    // 一条答案的html结构
  /*
    <div class="answer">
      <h2>作者</h2>
      <div class="content">
        内容
      </div>
    </div>
  */

    // 相关答案一条数据的html结构
  /*
    <li><a href='地址'>标题</a> n个回答</li>
  */

    // 你的代码

    // const arr = [1, 2, 3, 4]
    // const promises = arr.map(n => `./an${n}.json`)
    //   .map(url => getJSON(url))
    // Promise.all(promises)
    //   .then(arr => arr.reduce(
    //     (s, item) => [...s, ...item.data], [])
    //   )
    //   .then(arr => {
    //     console.log(arr);
    //     const cont = document.getElementById('answers')
    //     return cont.innerHTML = arr.map((v) => {
    //       return ` <div class="answer">
    //       <h2>${v.author.name}</h2>
    //       <div class="content">
    //         ${v.content}
    //       </div>
    //     </div>`
    //     }).join('')
    //   })

    // //不会了
    // const arr1 = [getJSON('./similar.json')]
    // Promise.all(arr1)
    //   .then(arr1 => {
    //     return [...arr1]
    //   })



    // .then(arr1 => {
    //   arr1.reduce(
    //     (s, item) => [...s, ...item.data], [])
    //   console.log(arr1)
    // }
    // )
  //   .then(arr1 => {
  //     console.log(arr1);
  //     const contend = document.querySelector('ul')
  //     return contend.innerHTML = arr1.map((w) => {
  //       return `<li><a href='${w.url}'>${w.title}</a> ${w.answer_count}个回答</li>`
  //     }).join('')
  //   }
  //   )
  // console.log(arr1);

</script>